<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .tabs {
    width: 500px;
    height: 500px;
    background-color: antiquewhite;
  }
  .tab-buttons {
    display: flex;
  }
  .tab-btn {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #f1f1f1;
    &.active {
      background-color: aquamarine;
      border-bottom: 1px solid red;
    }
  }
  .tab-pane {
    display: none;
    width: 400px;
    height: 300px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    &.active {
      display: block;
    }
  }

</style>
<body>
  <div class="tabs">
    <div class="tab-buttons">
      <button class="tab-btn active" data-tab="tab1">Tab 1</button>
      <button class="tab-btn" data-tab="tab2">Tab 2</button>
      <button class="tab-btn" data-tab="tab3">Tab 3</button>
    </div>
    <div class="tab-content">
      <div id="tab1" class="tab-pane active">
        <p>Content for Tab 1</p>
      </div>
      <div id="tab2" class="tab-pane">
        <p>Content for Tab 2</p>
      </div>
      <div id="tab3" class="tab-pane">
        <p>Content for Tab 3</p>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const tabBtns = document.querySelectorAll('.tab-btn');
      const tabPanes = document.querySelectorAll(".tab-pane");

      tabBtns.forEach(btn => {
        btn.addEventListener('click', function () {
          // 移除所有active类
          tabBtns.forEach(button => button.classList.remove('active'));
          tabPanes.forEach(pane => pane.classList.remove('active'));
          // 为当前按钮添加active类
          this.classList.add('active');
          const tabId = this.getAttribute('data-tab');
          document.getElementById(tabId).classList.add('active');
        })
      })
    })
  </script>
  
</body>
</html>